<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/dist/semantic.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="/dist/semantic.min.js"></script>
    <script src="/node_modules/art-template/lib/template-web.js"></script>
    <title>Document</title>
    <style>
        .title {
            padding-top: 30px;
            text-align: center;
        }
        
        body {
            padding: 0 40px;
        }
    </style>
</head>

<body>
    <h1 class='title'>用户列表</h1>
    <button class="ui primary button adduser">
            添加用户
    </button>
    <div class="ui modal">

        <div class="header">
            添加用户
        </div>
        <div class=" content">

            <form class="ui form">
                <div class="field">
                    <label>姓名</label>
                    <input type="text" name="uname" placeholder="请输入姓名">
                </div>
                <div class="field">
                    <label>年龄</label>
                    <input type="text" name="age" placeholder="请输入年龄">
                </div>
                <div class="field">
                    <label>性别</label>
                    <select name="gender" class="ui fluid dropdown">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="actions">
            <div class="ui black deny button">
                取消
            </div>
            <div class="ui positive right labeled icon button" id="addUser">
                确定
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>
    <table class="ui celled blue table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <th colspan="4">
                    <div class="ui right floated pagination menu">
                        <a class="icon item">
                            <i class="left chevron icon"></i>
                        </a>
                        <a class="item">1</a>
                        <a class="item">2</a>
                        <a class="item">3</a>
                        <a class="item">4</a>
                        <a class="icon item">
                            <i class="right chevron icon"></i>
                        </a>
                    </div>
                </th>
            </tr>
        </tfoot>
    </table>
    <script type="text/template" id="infoTpl">
        {{each data as val index}}
        <tr>
            <td>
                <div class="ui ribbon {{val.isdel ? 'red' : 'blue'}} label">{{val.isdel ? '删除' : '正常'}}</div>
            </td>
            <td>{{val.uname}}</td>
            <td>{{val.gender}}</td>
            <td>
                <a href="javascript:;" data-id="{{val.id}}" class="edit">编辑</a>
                <a href="javascript:;" data-id="{{val.id}}" class="{{val.isdel ? 'back' : 'delete'}}">{{val.isdel ? '恢复' : '删除'}}</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <script>
        $(function() {
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:3000/getAllHero',
                success: res => {
                    console.log(res);
                    var html = template('infoTpl', res);
                    $('tbody').html(html);
                }
            })
        })
        $('.adduser').on('click', () => {
            $('.ui.modal').modal('show');
        })
        $('#addUser').on('click', () => {
            $.ajax({
                type: 'post',
                url: 'http://127.0.0.1:3000/addHero',
                data: {
                    'uname': $('input[name=uname]').val(),
                    'age': $('input[name=age]').val(),
                    'gender': $('select[name=gender]').val(),
                    'isdel': 0
                },
                success: res => {
                    if (res.status == 200) {
                        // alert('添加成功');
                        location.reload();
                    }
                }
            })
        })
        $('tbody').on('click', '.delete', function() {
            var id = $(this).attr('data-id');
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:3000/deletehero/' + id,
                success: res => {
                    // console.log(res);
                    if (res.status == 200) {
                        location.reload();
                    }
                }
            })
        })
        $('tbody').on('click', '.back', function() {
            var id = $(this).attr('data-id');
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:3000/backhero/' + id,
                success: res => {
                    // console.log(res);
                    if (res.status == 200) {
                        location.reload();
                    }
                }
            })
        })
    </script>
</body>

</html>